import React, {Component} from "react";
import {Card, Table, Button, Icon, message, Modal} from "antd"
import LinkButton from "../../components/link-button";
import {addCategory, getCategoryList, updateCategory} from "../../api"
import AddForm from "./add-form";
import UpdateForm from "./update-form";

export default class Category extends Component {
    state = {
        categoryList: [], // 一级分类列表
        subCategoryList: [], // 二级分类列表
        loading: false, // 是否显示加载中
        parentId: '0', // 当前需要显示列表的父分类id
        parentName: '', // 当前需要显示列表的父分类名称
        showStatus: 0, // 标识添加/更新确认框是否显示 0表示全部不显示 1 表示显示添加 2 表示显示修改
    }

    // 初始化Table所有列的数组
    initColumns = () => {
        this.columns = [
            {title: '分类的名称', dataIndex: 'name'}, // 显示对应的属性名
            {
                title: '操作',
                width: 300,
                dataIndex: '',

                render: (category) => (
                    // category是subCategoryList数组的每一个对象
                    <span>
                       <LinkButton onClick={() => this.showUpdate(category)}>修改分类</LinkButton>
                        {/*如何向事件回调函数传递参数:先定义一个匿名函数,在函数调用处理的函数并传入数据*/}
                        {
                            this.state.parentId === '0' ?
                                <LinkButton
                                    onClick={() => this.showSubCategoryList(category)}>
                                    查看子分类</LinkButton> : null


                        }
                   </span>
                ),
            }

        ]
    }

    // 显示添加分类对话框
    showAdd = () => {
        this.setState({showStatus: 1})
    }


    // 添加分类
    addCategory =  () => {
        console.log("addCateGory()")
        this.form.validateFields(async(err,values)=>{
            if(!err){
                // 隐藏对话框
                this.setState({showStatus: 0})

                // 收集数据:父分类id和分类名称,并提交添加分类的请求(类似于vue的双向绑定)
                const {parentId, categoryName} = values
                // 清除输入的数据
                this.form.resetFields()
                const result = await addCategory(parentId, categoryName)
                if (result.status === 0) {
                    // 如果添加的分类就是当前分类列表下的分类那就重新获取
                    if(parentId === this.state.parentId){
                        // 重新获取分类列表显示
                        this.getCategorys()
                    }else if(parentId === '0'){ // 在二级分类列表下添加一级分类,重新获取一级分类列表，但不需要显示一级分类列表
                        /**这样会出现bug:在二级分类添加一级分类会直接跳转到一级分类列表
                         * this.setState({
                   parentId:'0'
               },()=>{
                  this.getCategorys()
               })*/

                        this.getCategorys('0')
                    }


                }
            }
        })




    }

    // 显示修改分类的对话框
    showUpdate = (category) => {
        // 保存分类对象(不用放到状态当中去)
        this.category = category
        // 更新状态
        this.setState({showStatus: 2})
    }

    // 修改分类
    updateCategory =  () => {
        console.log("updateCategory()")
        // 进行表单验证,只有验证通过了才处理
        this.form.validateFields(async(err,values)=>{
            if(!err){
                // 1.发送修改分类的请求
                const categoryId = this.category._id
                const {categoryName} = values
                // bug:form对象会缓存修改的数据,   解决：必须清除输入的数据
                this.form.resetFields()
                const result = await updateCategory({categoryId, categoryName})

                if (result.status === 0) {
                    // 2.重新展示列表
                    this.getCategorys()
                }


                // 3.隐藏对话框
                this.setState({
                    showStatus: 0
                })
            }
        })

    }

    // 隐藏确认框
    handleCancel = () => {
        this.form.resetFields()
        // 隐藏对话框
        this.setState({showStatus: 0})
    }

    // 异步获取商品一级/二级分类列表
    // parentId:如果没有指定根据状态的parentId发请求,如果指定了根据指定的请求
    getCategorys = async (parentId) => {
        // 在发请求前将loading设置为true
        this.setState({loading: true})
        // const {parentId} = this.state
        // 如果parentId有值就选传入的值,没值就从state里面获取
        parentId = parentId || this.state.parentId
        const result = await getCategoryList(parentId)
        // 请求拿到数据后将loading设置为false
        this.setState({loading: false})
        if (result.status === 0) {
            // 拿到分类数组(可能是一级分类也可能是二级分类)
            const categoryList = result.data

            if (parentId === '0') {
                // 更新一级分类
                this.setState({
                    categoryList
                })
            } else {
                // 更新二级分类
                this.setState({subCategoryList: categoryList})

            }

        } else {
            message.error('获取分类列表失败')
        }
    }

    // 显示指定一级分类的二级列表
    showSubCategoryList = (category) => {
        // 先更新状态,再获取二级列表
        this.setState({
            parentId: category._id, parentName: category.name
        }, () => { // 在状态更新且重新render后执行
            // console.log('parentId',this.state.parentId)
            this.getCategorys()
        })
        // this.setState()是异步的,不能立即获取最新的状态

    }

    // 显示指定一级分类列表
    showCategoryList = () => {
        // 更新为显示一级列表的状态,即将parentId更新为一级分类
        this.setState({
            parentId: '0',
            subCategoryList: [],
            parentName: ''
        })
    }

    // 为第一次render准备数据
    componentWillMount() {
        this.initColumns()
    }

    // 执行异步任务
    componentDidMount() {
        // 获取一级分类列表
        this.getCategorys()
    }


    render() {
        const {categoryList, loading, parentId, parentName, subCategoryList, showStatus} = this.state
        // 读取指定的分类
        const category = this.category || {} // bug:如果还没有指定一个空对象,因为category是点击修改按钮才显示,不然会报错
        // Card的左侧
        const title = parentId === '0' ? '一级分类列表' : (
            <span>
                <LinkButton onClick={this.showCategoryList}>一级分类列表</LinkButton>
                <Icon type="arrow-right" style={{marginRight: 5}}/>
                <span>{parentName}</span>
            </span>
        )
        // Card的右侧
        const extra = (
            <Button type="primary" onClick={this.showAdd}>
                <Icon type="plus"/>
                添加
            </Button>
        )


        return (
            <Card title={title} extra={extra}>
                <Table
                    bordered // 是否显示列边框和外边框
                    rowKey='_id'
                    dataSource={parentId === '0' ? categoryList : subCategoryList}
                    columns={this.columns}
                    loading={loading}
                    pagination={{defaultPageSize: 5}}
                />

                <Modal
                    title="添加分类"
                    okText="确认"
                    cancelText="取消"
                    visible={showStatus === 1}
                    onOk={this.addCategory}
                    onCancel={this.handleCancel}
                >
                    <AddForm
                        categoryList={categoryList}
                        parentId={parentId}
                        setForm={(form) => this.form = form}
                    />
                </Modal>

                <Modal
                    title="修改分类"
                    okText="确认"
                    cancelText="取消"
                    visible={showStatus === 2}
                    onOk={this.updateCategory}
                    onCancel={this.handleCancel}
                >
                    <UpdateForm categoryName={category.name} setForm={(form) => this.form = form}/>

                </Modal>

            </Card>
        )
    }
}
